<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPT向量化工具</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .upload-container {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            margin: 20px 0;
            transition: all 0.3s;
        }
        .upload-container:hover {
            border-color: #007bff;
        }
        .file-input {
            display: none;
        }
        .btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .file-info {
            margin-top: 15px;
            font-size: 14px;
        }
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            display: none;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .nav-links {
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
        }
        .nav-link {
            margin: 0 15px;
            text-decoration: none;
            color: #3498db;
            font-weight: bold;
        }
        .nav-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>PPT向量化工具</h1>
    
    <div class="nav-links">
        <a href="index.html" class="nav-link">返回AI聊天</a>
    </div>
    
    <p>上传PPT文件，将其内容提取并保存到Pinecone向量数据库中，方便后续AI查询和检索。</p>
    
    <div class="upload-container" id="uploadArea">
        <input type="file" id="pptFile" class="file-input" accept=".ppt,.pptx">
        <button class="btn" id="browseBtn">选择PPT文件</button>
        <div class="file-info" id="fileInfo">未选择文件</div>
    </div>
    
    <button class="btn" id="uploadBtn" style="width: 100%;" disabled>上传到向量数据库</button>
    
    <div class="status" id="statusBox"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pptFile = document.getElementById('pptFile');
            const browseBtn = document.getElementById('browseBtn');
            const uploadBtn = document.getElementById('uploadBtn');
            const fileInfo = document.getElementById('fileInfo');
            const uploadArea = document.getElementById('uploadArea');
            const statusBox = document.getElementById('statusBox');
            
            browseBtn.addEventListener('click', function() {
                pptFile.click();
            });
            
            pptFile.addEventListener('change', function() {
                if (pptFile.files.length > 0) {
                    const file = pptFile.files[0];
                    fileInfo.textContent = `已选择: ${file.name} (${formatFileSize(file.size)})`;
                    uploadBtn.disabled = false;
                } else {
                    fileInfo.textContent = '未选择文件';
                    uploadBtn.disabled = true;
                }
            });
            
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                uploadArea.style.borderColor = '#007bff';
            });
            
            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                e.stopPropagation();
                uploadArea.style.borderColor = '#ccc';
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                uploadArea.style.borderColor = '#ccc';
                
                if (e.dataTransfer.files.length > 0) {
                    pptFile.files = e.dataTransfer.files;
                    const file = e.dataTransfer.files[0];
                    
                    if (file.name.endsWith('.ppt') || file.name.endsWith('.pptx')) {
                        fileInfo.textContent = `已选择: ${file.name} (${formatFileSize(file.size)})`;
                        uploadBtn.disabled = false;
                    } else {
                        showStatus('请选择有效的PPT文件(.ppt或.pptx格式)', false);
                    }
                }
            });
            
            uploadBtn.addEventListener('click', function() {
                if (pptFile.files.length === 0) return;
                
                const file = pptFile.files[0];
                const formData = new FormData();
                formData.append('file', file);
                
                uploadBtn.disabled = true;
                uploadBtn.textContent = '上传中...';
                
                fetch('/api/ppt/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showStatus(data.message, true);
                    } else {
                        showStatus(data.message, false);
                    }
                })
                .catch(error => {
                    showStatus('上传失败: ' + error.message, false);
                })
                .finally(() => {
                    uploadBtn.disabled = false;
                    uploadBtn.textContent = '上传到向量数据库';
                });
            });
            
            function formatFileSize(bytes) {
                if (bytes < 1024) return bytes + ' B';
                else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB';
                else return (bytes / 1048576).toFixed(2) + ' MB';
            }
            
            function showStatus(message, isSuccess) {
                statusBox.textContent = message;
                statusBox.style.display = 'block';
                
                if (isSuccess) {
                    statusBox.className = 'status success';
                } else {
                    statusBox.className = 'status error';
                }
                
                setTimeout(() => {
                    statusBox.style.display = 'none';
                }, 5000);
            }
        });
    </script>
</body>
</html> 